window.onload = function () {
    var container = document.getElementById("container");
    var imgList = document.getElementById("imgList");
    var img = document.getElementsByTagName("img");
    var button = document.getElementById("button");
    var allA = document.getElementsByTagName("a");
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    var arrow = document.getElementsByClassName("arrow");
    //获取prev的height样式
    var height = getComputedStyle(arrow[0], null).height;

    //console.log(arrow[0].style.width);
    var index = 0;

    imgList.style.width = 620 * (img.length + 1) + "px";
    //动态设置button组的居中位置
    button.style.left = (container.offsetWidth - button.offsetWidth) / 2 + "px";
    allA[index].style.backgroundColor = "black";

    //使用js布置prev箭头和next箭头的位置
    prev.style.top = (container.offsetHeight - parseInt(height)) / 2 + "px";

    next.style.right = "0px";
    next.style.top = (container.offsetHeight - parseInt(height)) / 2 + "px";




    //创建move函数,prev值为620，next值为-620
    //left：向前left的极限值为-620px；向后left的极限值为-3720px；

    function move(offset) {
        
        if (parseInt(imgList.style.left) > -620) {
            imgList.style.left = -3100 + "px";
        } else if (parseInt(imgList.style.left) < -3100) {
            imgList.style.left = -620 + "px";
        }
        imgList.style.left = parseInt(imgList.style.left) + offset + "px";

    }

 
 
 
 
 
 
 
 
 
    //创建按钮动画

    for (var i = 0; i < allA.length - 2; i++) {
        //为没意个按钮标号，方便创建单个按钮事件,利用标号实现单击按钮修改left值
        allA[i].num = i;
        allA[i].onclick = function () {
            //console.log(this.index)
            //将局部变量this.num传递给全局变量index，此时全局变量index的值已经修改
            index = this.num;
            //console.log(this.num);
            imgList.style.left = -620 * (index + 1) + "px";
            resetA();
        };
    }

    //重置相应按钮的效果
    function resetA() {
        for (var i = 0; i < allA.length - 2; i++) {
            //js会创建内联样式，优先级高于css的样式，会造成第一个按钮的效果显示不出，设置成空串即可
            allA[i].style.backgroundColor = "";
        }
        allA[index].style.backgroundColor = "black";
    }





    //为左右箭头绑定点击事件
    prev.onclick = function () {
        move(620);
        //将箭头和按钮利用全局变量index绑定在一起
        index--;
        if (index < 0)
            index = 4;
        resetA();
    };
    next.onclick = function () {
        move(-620);
         //将箭头和按钮利用全局变量index绑定在一起
            index++;
            if (index > 4)
                index = 0;
            resetA();
    };

};